<template>
  <div class="masking">
    <div class="left-page">
      <div class="vehicle-overview">
        <div class="bgc_title">
          <span class="font-fam">车辆管理</span>
        </div>
        <div class="vehicles-num">
          <div class="left-icon" />
          <div class="right-text">
            <div class="flex" v-for="(item, index) in vehicleData" :key="index">
              <div class="vehicle-font">{{ item.label }}</div>
              <div :style="{ color: item.color }">{{ item.count }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="type-statistics">
        <div class="bgc_title">
          <span class="font-fam">车辆类型统计</span>
          <div class="toggle">
            <div class="toggle-select" :class="{ active: isInternal }" @click="toggleContent(true)">内部车</div>
            <div class="toggle-select" :class="{ active: !isInternal }" @click="toggleContent(false)">外部车</div>
          </div>
        </div>
        <div v-if="isInternal">
          <div class="statistics-charts">
            <statisticsCharts />
            <div class="charts-title">
              <div>
                <div class="construction-truck">
                  工程车<span>{{ chartsData[0].value }}</span>
                </div>
                <div class="classified-vehicle">
                  <div>
                    作业中/<span>{{ chartsData[0].children[0].value }}</span>
                  </div>
                  <div>
                    空闲中/<span>{{ chartsData[0].children[1].value }}</span>
                  </div>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="construction-truck construction-green">
                  吊车<span>{{ chartsData[1].value }}</span>
                </div>
                <div class="classified-vehicle">
                  <div>
                    作业中/<span>{{ chartsData[1].children[0].value }}</span>
                  </div>
                  <div>
                    空闲中/<span>{{ chartsData[1].children[1].value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="statistics-charts">
            <statisticsCharts />
            <div class="charts-title">
              <div>
                <div class="construction-truck">
                  工程车<span>{{ chartsData[0].value }}</span>
                </div>
                <div class="classified-vehicle">
                  <div>
                    作业中/<span>{{ chartsData[0].children[0].value }}</span>
                  </div>
                  <div>
                    空闲中/<span>{{ chartsData[0].children[1].value }}</span>
                  </div>
                </div>
              </div>
              <div style="margin-top: 10px">
                <div class="construction-truck construction-green">
                  吊车<span>{{ chartsData[1].value }}</span>
                </div>
                <div class="classified-vehicle">
                  <div>
                    作业中/<span>{{ chartsData[1].children[0].value }}</span>
                  </div>
                  <div>
                    空闲中/<span>{{ chartsData[1].children[1].value }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="state-statistics">
        <div class="bgc_title">
          <span class="font-fam">车辆状态统计</span>
          <div class="toggle">
            <div class="toggle-select" :class="{ active: isStatus }" @click="toggleStatus(true)">内部车</div>
            <div class="toggle-select" :class="{ active: !isStatus }" @click="toggleStatus(false)">外部车</div>
          </div>
        </div>
        <div v-if="isStatus">
          <statusCharts />
        </div>
        <div v-else><statusCharts /></div>
      </div>
      <div class="alarm-statistics">
        <div class="bgc_title">
          <span class="font-fam">异常告警统计</span>
          <div class="toggle">
            <div class="toggle-select" :class="{ active: isAlarm }" @click="toggleAlarm(true)">内部车</div>
            <div class="toggle-select" :class="{ active: !isAlarm }" @click="toggleAlarm(false)">外部车</div>
          </div>
        </div>
        <div v-if="isAlarm"><alarmTable /></div>
        <div v-else><alarmTable /></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import statisticsCharts from "./statisticsCharts.vue"
import statusCharts from "./statusCharts.vue"
import alarmTable from "./alarmTable.vue"
const isInternal = ref(true)
const isStatus = ref(true)
const isAlarm = ref(true)
const vehicleData = [
  { label: "总车辆数", count: 140, color: "#E7F033" },
  { label: "在线车辆数", count: 120, color: "#46CBF0" },
  { label: "离线车辆数", count: 20, color: "#00D090" }
]

const chartsData = [
  {
    name: "工程车",
    value: 8,
    children: [
      { name: "作业中", value: 4 },
      { name: "空闲中", value: 4 }
    ]
  },
  {
    name: "吊车",
    value: 12,
    children: [
      { name: "作业中", value: 5 },
      { name: "空闲中", value: 7 }
    ]
  }
]

const toggleContent = (value: boolean) => {
  isInternal.value = value
}
const toggleStatus = (value: boolean) => {
  isStatus.value = value
}
const toggleAlarm = (value: boolean) => {
  isAlarm.value = value
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-content: center;
}
.masking {
  width: 32.625rem;
  height: 100%;
  background: linear-gradient(90deg, #1f252f 0%, rgba(31, 37, 47, 0) 100%);
  border-radius: 0px 0px 0px 0px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
.left-page {
  width: 26.625rem;
  height: 58.125rem;
  background-image: url("../../../assets/images/bgc-left.png");
  background-size: 100% 100%;
  background-repeat: no-repeat; /* 防止图片重复 */
  position: absolute;
  top: 123px;
  left: 32px;
  z-index: 99991;
  .font-fam {
    font-family: YouSheBiaoTiHei;
  }
  .vehicle-overview {
    width: 100%;
    height: 150px;
    .bgc_title {
      width: 394px;
      height: 44px;
      background-image: url("../../../assets/images/bgc-vehicle.png");
      background-size: 100% 100%;
      background-repeat: no-repeat; /* 防止图片重复 */
      font-size: 26px;
      line-height: 30px;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      padding-left: 34px;
      margin-left: 17px;
      span {
        background: linear-gradient(180deg, #ffffff 10%, #63b3fa 100%);
        -webkit-background-clip: text; /* 对于 Safari/Chrome */
        background-clip: text; /* 对于其他浏览器 */
        color: transparent; /* 使文字本身透明，显示背景 */
        margin-top: -5px;
      }
    }
    .vehicles-num {
      display: flex;
      align-items: center;
      margin-left: 9px;
      margin-top: 26px;
      .left-icon {
        width: 64px;
        height: 55px;
        background-image: url("../../../assets/images/icon-veh.png");
        background-size: 100% 100%;
      }
      .right-text {
        width: 336px;
        height: 36px;
        background: linear-gradient(
          90deg,
          rgba(17, 49, 128, 0) 0%,
          rgba(17, 69, 128, 0.6) 24%,
          rgba(17, 49, 128, 0) 98%
        );
        border-radius: 0px 0px 0px 0px;
        margin-left: 7px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .vehicle-font {
          font-family: AlibabaPuHuiTi20;
          font-weight: normal;
          font-size: 14px;
          color: #ffffff;
          margin-right: 4px;
        }
        .vehicle-num {
          font-family: DINCONDENSED;
          font-weight: bold;
          font-size: 26px;
        }
      }
    }
  }
  .type-statistics {
    width: 100%;
    height: 245px;

    .bgc_title {
      width: 394px;
      height: 44px;
      background-image: url("../../../assets/images/bgc-vehicle.png");
      background-size: 100% 100%;
      background-repeat: no-repeat; /* 防止图片重复 */
      font-size: 26px;
      line-height: 30px;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      padding-left: 34px;
      margin-left: 17px;
      justify-content: space-between;
      span {
        background: linear-gradient(180deg, #ffffff 10%, #63b3fa 100%);
        -webkit-background-clip: text; /* 对于 Safari/Chrome */
        background-clip: text; /* 对于其他浏览器 */
        color: transparent; /* 使文字本身透明，显示背景 */
        margin-top: -5px;
      }
    }
    .toggle {
      display: flex;
      font-weight: normal;
      font-size: 14px;
      font-family: AlibabaPuHuiTi20;
      color: #ffffff;
      cursor: pointer;
      .toggle-select {
        width: 48px;
        height: 30px;
      }
      .toggle-select.active {
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
        background-image: url("../../../assets/images/bgc-tab.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
    .statistics-charts {
      padding: 0 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 25px;
      .charts-title {
        width: 152px;
        height: 111px;

        .construction-truck {
          width: 152px;
          height: 20px;
          background-image: url("../../../assets/images/bgc-blue.png");
          background-size: 100% 100%;
          background-repeat: no-repeat; /* 防止图片重复 */
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          line-height: 20px;
          span {
            font-family: DINCONDENSED;
            font-weight: bold;
            font-size: 18px;
            margin-left: 8px;
          }
        }
        .construction-green {
          background-image: url("../../../assets/images/bgc-green.png");
          background-size: 100% 100%;
          background-repeat: no-repeat; /* 防止图片重复 */
        }
        .classified-vehicle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 4px;
          color: #ffffff;
          span {
            font-family: DINCONDENSED;
            font-weight: bold;
            font-size: 18px;
            margin-left: 4px;
          }
        }
      }
    }
  }
  .state-statistics {
    width: 100%;
    height: 175px;

    .bgc_title {
      width: 394px;
      height: 44px;
      background-image: url("../../../assets/images/bgc-vehicle.png");
      background-size: 100% 100%;
      background-repeat: no-repeat; /* 防止图片重复 */
      font-size: 26px;
      line-height: 30px;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      padding-left: 34px;
      margin-left: 17px;
      justify-content: space-between;
      span {
        background: linear-gradient(180deg, #ffffff 10%, #63b3fa 100%);
        -webkit-background-clip: text; /* 对于 Safari/Chrome */
        background-clip: text; /* 对于其他浏览器 */
        color: transparent; /* 使文字本身透明，显示背景 */
        margin-top: -5px;
      }
    }
    .toggle {
      display: flex;
      font-weight: normal;
      font-size: 14px;
      font-family: AlibabaPuHuiTi20;
      color: #ffffff;
      cursor: pointer;
      .toggle-select {
        width: 48px;
        height: 30px;
      }
      .toggle-select.active {
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
        background-image: url("../../../assets/images/bgc-tab.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
  .alarm-statistics {
    width: 100%;
    height: 363px;
    .bgc_title {
      width: 394px;
      height: 44px;
      background-image: url("../../../assets/images/bgc-vehicle.png");
      background-size: 100% 100%;
      background-repeat: no-repeat; /* 防止图片重复 */
      font-size: 26px;
      line-height: 30px;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      padding-left: 34px;
      margin-left: 17px;
      justify-content: space-between;
      span {
        background: linear-gradient(180deg, #ffffff 10%, #63b3fa 100%);
        -webkit-background-clip: text; /* 对于 Safari/Chrome */
        background-clip: text; /* 对于其他浏览器 */
        color: transparent; /* 使文字本身透明，显示背景 */
        margin-top: -5px;
      }
    }
    .toggle {
      display: flex;
      font-weight: normal;
      font-size: 14px;
      font-family: AlibabaPuHuiTi20;
      color: #ffffff;
      cursor: pointer;
      .toggle-select {
        width: 48px;
        height: 30px;
      }
      .toggle-select.active {
        font-weight: 600;
        font-size: 14px;
        color: #ffffff;
        background-image: url("../../../assets/images/bgc-tab.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
